<template>
    <TraceabilityDetailtyDetail /> 
    <div>
      <el-radio-group v-model="from.radio1" @change="FarmMessage" size="large">
        <el-radio-button label="养殖信息(5/5)"  :value="1"  />
        <el-radio-button label="屠宰信息(5/5)"  :value="2" />
        <el-radio-button label="深加工信息(0/5)" :value="3" />
      </el-radio-group>
    </div>
    <h2 style="color: rgba(5, 117, 230, 0.8);">屠宰信息 &nbsp;&nbsp;&nbsp;<el-radio-button label="设置" @click="setInput"  /></h2> 
    <el-divider />
    <table  v-for="i in data1">
      <tr>
        <td>批次:   {{i.slaughterBatch }}</td>
        &nbsp;  &nbsp; &nbsp;
        <td>到厂均重：{{ i.weightToFactory }}</td>
        <td></td>
      </tr>
      <tr>
        <td>到场时间：  {{i.factoryTime }}</td>
        &nbsp;  &nbsp; &nbsp;
        <td>屠宰时间：  {{i.slaughterTime }}</td>
     
      </tr>
    </table>
    <el-dialog v-model="dialogFormVisible2" title="屠宰信息" width="500">
    <el-form :model="data2">
      <el-form-item label="批次" :label-width="formLabelWidth2">
        <el-input v-model="data2.slaughterBatch" autocomplete="off" />
      </el-form-item>
      <el-form-item label="到厂均重" :label-width="formLabelWidth2">
        <el-input v-model="data2.weightToFactory" autocomplete="off" />
      </el-form-item>
      <el-form-item label="到厂时间" :label-width="formLabelWidth2">
        <el-col :span="11">
        <el-date-picker
          v-model="data2.factoryTime"
          type="date"
          default-time
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY/MM/DD HH:mm:ss"
        />
      </el-col>
      </el-form-item>
      <el-form-item label="屠宰时间" :label-width="formLabelWidth2">
        <el-col :span="11">
        <el-date-picker
          v-model="data2.slaughterTime"
          type="date"
        
         value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY/MM/DD HH:mm:ss"
        />
      </el-col>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="UpdateSlaughter">
         保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div>
    <h2 style="color: rgba(5, 117, 230, 0.8);">相关资质 &nbsp;&nbsp;&nbsp;</h2> 
    <el-divider />
    <el-upload
                              class="avatar-uploader"
                              v-model:file-list="fileList1"
                              action="https://localhost:44333/Traceability/UploadFileSecond"
                              :on-success="handleAvatarSuccess1"
                              list-type="picture-card"
                              :on-preview="handlePictureCardPreview1"
                              :on-remove="handleRemove1"
                          >    
                              <el-icon><Plus /></el-icon>
                          </el-upload>
  
                          <el-dialog v-model="dialogVisible1">
                              <img w-full :src="dialogImageUrl1" alt="Preview Image" />
                    </el-dialog>
  </div>
  <h2 style="color: rgba(5, 117, 230, 0.8);">企业照片 &nbsp;&nbsp;&nbsp;</h2> 
<el-divider />
<div>
  <el-upload
                              class="avatar-uploader"
                              v-model:file-list="fileList2"
                              action="https://localhost:44333/Traceability/UploadFileSecond"
                              :on-success="handleAvatarSuccess2"
                              list-type="picture-card"
                              :on-preview="handlePictureCardPreview2"
                              :on-remove="handleRemove2"
                          >
                              <el-icon><Plus /></el-icon>
                          </el-upload>
  
                          <el-dialog v-model="dialogVisible">
                              <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
</div>
    </template>
<script lang="ts" setup>

import { GetSlaughterImages } from '@/api/admin/index'
import { AddRelevantQualificationSlaughterImages } from '@/api/admin/index'
import { UpdateRelevantQualificationSlaughterImages } from '@/api/admin/index'
import { AddCorporatePhotoSlaughterImages } from '@/api/admin/index'
import { UpdateCorporatePhotoSlaughterImages } from '@/api/admin/index'

import { UpdateSlaughterInformation } from '@/api/admin/index'
import { GetSlaughterInformation } from '@/api/admin/index'
import TraceabilityDetailtyDetail from '@/views/TraceabilityManagements/PublicTraceabilityDetailsView.vue'
import { DelPicc } from '@/api/admin/index'
import { Plus } from '@element-plus/icons-vue'
import {type Pic,type Slaughter} from '@/api/admin/type'
import{AddPic} from '@/api/admin/index'
import type { UploadProps, UploadUserFile } from 'element-plus'
import {GetTraceabilityIndexById} from '@/api/admin/index'
import { reactive, ref,onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const router = useRouter()

onMounted(()=>{
    GetTraceabilityById()
    console.log(rerepic.value);
    console.log( from.value.radio1);
    FarmMessage()
    getGetSlaughterInformation()
    GetSlaughterImagesImages1()
    GetSlaughterImagesImages2()
})
const from=ref({
    indexId:null,
  dialogFormVisible:false,
  shopName:'',
  batch:'',
  expiration:null,
  production_License:'',
  manufacturing:'',
  information:'',
  image:'',
  createById:null,
  createByName:'' ,
  createTime :'',
  isno:false,
  IsDeleted:false,
  imagess:'',
  fileList:[],
  radio1:2
})
const rerepic=ref([])
const data=ref([])
console.log(from.value);
const fileList = ref([
  {
    url: '',
  },
])
const GetTraceabilityById = async () => {
    const res = await GetTraceabilityIndexById(Number(localStorage.getItem("TraceabilityId")));
    from.value = res.data;
    if (res.data.imagess) {
      const imagesArray = res.data.imagess.split(',');

      // 清空 fileList
      fileList.value = [];

      // 将每个图片路径添加到 fileList
      imagesArray.forEach(image => {
        fileList.value.push({ url: image.trim() });
      });
      console.log('File List:', fileList.value); // 查看结果
    } 
};
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  
  DelPic(uploadFile.url)
}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
const aa=('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''))
  console.log('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''));
  console.log(aa);
 
  if (!fileList.value.some(file => file.url === aa.trim())) {
  fileList.value.push({ url: aa.trim() });
}
 
   console.log(fileList.value);
   addpic(aa)
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const DelPic=async(val:any)=>{
  
    let inputt=<Pic>{}
        inputt.iid=route.query.Id
        inputt.pic=val
        console.log(inputt);
    const cc=await DelPicc(inputt)
    console.log(cc);
    GetTraceabilityById()
}
const addpic=async(val:any)=>{
    let input=<Pic>{}
        input.iid=route.query.Id
        input.pic=val
      
        
    const bb=await AddPic(input)
    console.log(bb);
    GetTraceabilityById()
}
const FarmMessage=()=>{
    switch(from.value.radio1){
        case 1:
          router.push({name:"TraceabilityHusbandryDetails"})
        break;   
        case 2:
        router.push({name:"TraceabilitySlaughterDetails"})
        break;  
        case 3:
        router.push({name:"TraceabilityDeepProcessingDetails"})
        break;   
      }
} 
const data1=ref([])
const data2=ref<Slaughter>({
  slaughterId:0,
    slaughterBatch:'',
    weightToFactory:0,
    factoryTime:'',
    slaughterTime:''
})
const getGetSlaughterInformation=async()=>{
  await GetSlaughterInformation().then(function(res){
    console.log(res.data);
    data1.value=res.data
  })
}
const dialogTableVisible2 = ref(false)
const dialogFormVisible2 = ref(false)
const formLabelWidth2 = '140px'
const setInput=()=>{
  dialogFormVisible2.value=true;
  getGetSlaughterInformation1()
}
const getGetSlaughterInformation1=async()=>{
  await GetSlaughterInformation().then(function(res){
    console.log(res.data[0]);
    data2.value=res.data[0]
  })
}
const UpdateSlaughter=async()=>{
  await UpdateSlaughterInformation(data2.value).then(function(res){
    if(res.data>0){
      dialogFormVisible2.value=false;
      getGetSlaughterInformation()
    }
  })
}

//-------------------------------------照
const fileList1 = ref([
  {
    url: '',
  },
])
//相关资质照片
const GetSlaughterImagesImages1=async()=>{
  await GetSlaughterImages().then(function(res){
    console.log(res.data[0]);
    if (res.data[0].relevantQualification) {
      const imagesArray1 = res.data[0].relevantQualification.split(',');

      // 清空 fileList1
      fileList1.value = [];

      // 将每个图片路径添加到 fileList1
      imagesArray1.forEach(relevantQualification => {
       
          fileList1.value.push({ url: relevantQualification.trim() });
        
        
      });
      
      console.log('File List:', fileList1.value); // 查看结果
    } 
  })
}
const dialogImageUrl1 = ref('')
const dialogVisible1 = ref(false)

const handleRemove1: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  
  UpdateRelevantQualificationSlaughter(uploadFile.url)
}
const handleAvatarSuccess1: UploadProps['onSuccess'] = (
  
  response,
  uploadFile
) => {
const aa=('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''))
  console.log('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''));
  console.log(aa);
 
  if (!fileList1.value.some(file => file.url === aa.trim())) {
  fileList1.value.push({ url: aa.trim() });
}
 
   console.log(fileList1.value);
   AddRelevantQualificationSlaughter(aa)
}
const handlePictureCardPreview1: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl1.value = uploadFile.url!
  dialogVisible1.value = true

}
////////////////////////////////////////////////////////////////////
const UpdateRelevantQualificationSlaughter=async(val:any)=>{
  
  let inputt=<Pic>{}
      inputt.iid=route.query.Id
      inputt.pic=val
      console.log(inputt);
  const cc=await UpdateRelevantQualificationSlaughterImages(inputt)
  console.log(cc);
  GetSlaughterImagesImages1()
}
const AddRelevantQualificationSlaughter=async(val:any)=>{
  let input=<Pic>{}
      input.iid=route.query.Id
      input.pic=val  
  const bb=await AddRelevantQualificationSlaughterImages(input)
  console.log(bb);
  GetSlaughterImagesImages1()
}



const fileList2 = ref([
  {
    url: '',
  },
])
//企业照片
const GetSlaughterImagesImages2=async()=>{
  await GetSlaughterImages().then(function(res){
    console.log(res.data[0]);
    if (res.data[0].corporatePhoto) {
      const imagesArray2 = res.data[0].corporatePhoto.split(',');

      // 清空 fileList1
      fileList2.value = [];

      // 将每个图片路径添加到 fileList1
      imagesArray2.forEach(corporatePhoto => {
        fileList2.value.push({ url: corporatePhoto.trim() });
      });
      console.log('File List:', fileList2.value); // 查看结果
    } 
  })
}
const dialogImageUrl2 = ref('')
const dialogVisible2 = ref(false)

const handleRemove2: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  
  DellaughterImages(uploadFile.url)
}
const handleAvatarSuccess2: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
const aa=('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''))
  console.log('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''));
  console.log(aa);
  if (!fileList2.value.some(file => file.url === aa.trim())) {
  fileList2.value.push({ url: aa.trim() });
}
 
   console.log(fileList2.value);
   addDellaughterImages(aa)
}
const handlePictureCardPreview2: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl2.value = uploadFile.url!
  dialogVisible2.value = true

}
//----------------------------------------------------------------------
const addDellaughterImages=async(val:any)=>{
  
  let inputt=<Pic>{}
      inputt.iid=route.query.Id
      inputt.pic=val
      console.log(inputt);
  const cc=await AddCorporatePhotoSlaughterImages(inputt)
  console.log(cc);
  GetSlaughterImagesImages2()
}
const DellaughterImages=async(val:any)=>{
  let input=<Pic>{}
      input.iid=route.query.Id
      input.pic=val
  const bb=await UpdateCorporatePhotoSlaughterImages(input)
  console.log(bb);
  GetSlaughterImagesImages2()
}
</script>
